<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<!-- 组件的出现就是为了拆分实例的代码量，让我们以不同的组件来划分不同的功能模块 
    模块化：从业务功能上
    组件化：从ui设计上 方便ui组件的重用

    创建组件的三种方式：
    1、var com1 = Vue.extend({
        template:'',//要展示的html结构 并且只能有唯一的一个根元素
    })
        Vue.component('组件名称',com1)
        //如果要使用组件，把组件名称以html标签的形式引入
        如：<组件名称></组件名称>

    2、Vue.component('com1', {
            template: '<h3>第一种方式Vue.extend引入组件</h3>'
        });

    3、
-->

<body>
    <div id="app">
        <!-- <com1></com1> -->
        <!-- <com2></com2> -->
        <com3></com3>
        <login></login>
    </div>
    <div id="app2">
        <com3></com3>
        <login></login>
    </div>
    <template id="com3">
        <h3>这是第三种方式创建的全局组件</h3>
    </template>
    <template id="login">
            <h3>这是第三种方式创建的私有组件</h3>
        </template>
    <script>
        // var com1 = Vue.extend({
        //     template: '<h3>第一种方式Vue.extend引入组件</h3>'
        // })
        // Vue.component('com1', com1);
        //第一种方式 简写为如下形式
        // Vue.component('com1', Vue.extend({
        //     template: '<h3>第一种方式Vue.extend引入组件</h3>'
        // }));
        //第二种方式
        // Vue.component('com2', {
        //     template: '<h3>第一种方式Vue.extend引入组件</h3>'
        // });
        //第三种方式
        Vue.component('com3', {
            template: '#com3'
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
        var vm = new Vue({
            el: '#app2',
            data: {},
            methods: {},
            directives: {
                
            },
            filters: {
                
            },
            //用来定义私有组件
            components: {
              login: {
                  template: '#login'
              }  
            },

            beforeCreate () {
                
            },
            created () {
                
            },
            beforeMount () {
                
            },
            mounted () {
                
            },
            beforeDestroy () {
                
            },
            destroyed () {
                
            }

        });
    </script>
</body>

</html>